<template>
    <yh-dialog
        title="查询复核信息"
        :visible.sync="visibleTemp"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="500px"
        drag
        @close="handleButton('primary-search-cancel')"
    >
        <el-form id="header-query" label-width="120px" style="width:90%" ref="operationSearchParam" :model="operationSearchParam">
            <el-form-item label="用户编号" prop="userCode">
                <el-input size="mini" v-model="operationSearchParam.userCode" clearable></el-input>
            </el-form-item>
            <el-form-item label="用户账号" prop="userName">
                <el-input size="mini" v-model="operationSearchParam.userName" clearable></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="userNickName">
                <el-input size="mini" v-model="operationSearchParam.userNickName" clearable></el-input>
            </el-form-item>
            <el-form-item label="事件" prop="modifyAffairs">
                <el-select v-model="operationSearchParam.modifyAffairs" filterable clearable collapse-tags multiple size="mini">
                    <el-option v-for="(value, key) in Dict.modifyAffairsPojo" :key="key" :value="key" :label="value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="复核状态" prop="modifyStatusTypes">
                <el-select v-model="operationSearchParam.modifyStatusTypes" filterable clearable collapse-tags multiple size="mini">
                    <el-option v-for="(value, key) in Dict.modifyStatusPojo" :key="key" :value="key" :label="value"> </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleButton('reset')"> 重 置 </el-button>
            <el-button size="mini" @click="handleButton('primary-search-cancel')"> 取 消 </el-button>
            <el-button size="mini" type="primary" @click="handleButton('primary-search-confirm')">
                确 定
            </el-button>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { AuthCheckDTO } from '../vo/auth-manage';
import Dict from '../dict/user-check';
@Component({ name: 'UserCheckPrimarySearch', components: {} })
export default class UserCheckPrimarySearch extends Vue {
    @Prop() searchParams: AuthCheckDTO;
    @Prop() visible: boolean;
    visibleTemp: boolean = false;
    Dict = new Dict(); // 字典

    @Watch('visible', { immediate: true })
    changeVisible() {
        if (this.visible) {
            this.visibleTemp = this.visible;
            console.log(this.searchParams, 'searchParams+++++++++++++++++++++++++++++++++==');
            this.operationSearchParam = JSON.parse(JSON.stringify(this.searchParams));
        }
    }

    operationSearchParam: AuthCheckDTO = {
        userCode: '',
        userName: '',
        userNickName: '',
        modifyAffairs: [],
        modifyStatusTypes: [],
    };

    // 点击行
    handleButton(type: string) {
        if (type == 'reset') {
            const $form = this.$refs['operationSearchParam'] as any;
            $form.resetFields();
            return;
        }
        this.visibleTemp = false;
        this.$emit('handleButton', { type, params: this.operationSearchParam });
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-form {
    .el-form-item {
        margin-bottom: 10px !important;
    }
}
/deep/ .el-select {
    width: 100%;
}

/deep/ .el-select__tags {
    flex-wrap: nowrap;

    .el-tag.el-tag--info {
        display: flex;
        align-items: center;

        .el-select__tags-text {
            display: block;
            font-size: 12px;
            max-width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
